<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>验证手机</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/base.css" />
		<script src="js/flexible.js"></script>
		<link rel="stylesheet" href="css/yanzhengshouji.css" />
		<script src="js/jquery-3.1.1.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/config.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/gVerify.js" charset="utf-8"></script>
		<style type="text/css">
			#v_container {
				width: 65px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				border-radius: 0px 3px 3px 0px;
				position: absolute;
				top: 0.3rem;
				right: 0.2rem;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #333;"></a>
			<h1 class="mui-title">验证手机</h1>
		</header>
		<form class="mui-input-group" style="margin-top: 44px;">
			<div class="mui-input-row">
				<label>手机号</label>
				<input id='phone' type="text" placeholder="请输入手机号">
			</div>
			<div class="mui-input-row" style="position: relative;">
				<label>验证码</label>
				<input id='phoneNum' type="text" placeholder="请输入验证码">
				<div id="v_container"></div>
			</div>

		</form>
		<div class="mui-content" style="background: none;padding-top: 0;margin-top: 1.5rem;">
			<div class="mui-content-padded">
				<button type="button" class="mui-btn mui-btn-primary mui-btn-block" id="btn" style="font-size: 0.4rem;">获取验证码</button>
			</div>
		</div>
		<script type="text/javascript">
			var loginHref = window.location.href;
			var loginIndex = loginHref.split('=')[1];
			alert(loginIndex);
			//验证手机格式
			$("#phone").blur(function() {
				var phone = $('#phone').val();
				// alert(phone);
				var reg = /^1[3|4|5|8|7|9|6][0-9]\d{8}$/;
				if(phone == "" || !reg.test(phone)) {
					mui.toast("请正确填写手机号码");
					return;
				}
			});
			//		图形验证码
			var verifyCode = new GVerify("v_container");
			$('#btn').on('tap', function() {
				var res = verifyCode.validate($('#phoneNum').val());
				if(res) {
					mui.ajax(config.host + "/home/Login/getcode", {
						data: {
							phone: $('#phone').val()
						},
						dataType: 'json',
						type: 'post', //HTTP请求类型	   
						success: function(data) {
							if(data.code == 200) {
								mui.toast(data.msg);
								var phone = $('#phone').val();
								location.href = 'register.html?phone=' + phone + '=loginIndex='+loginIndex;
							} else {
								mui.toast(data.msg);
							}
						},
						error: function() {}
					})
				} else {
					mui.toast('验证码错误');
				}
			})
		</script>
	</body>

</html>